<template>
  <div>
    <!-- 基本信息 -->
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" style="max-width: 1000px" label-width="auto"
      class="demo-ruleForm" status-icon>
      <div class="formTop">
        <div class="left">
          <el-form-item label="老人姓名：" prop="name">
            <el-input v-model="ruleForm!.name" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="性别：" prop="gender">
            <el-radio-group v-model="ruleForm!.gender">
              <el-radio :value="1">男</el-radio>
              <el-radio :value="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="出生日期：" prop="birthday">
            <el-date-picker v-model="ruleForm!.birthday" type="datetime" placeholder="请选择" value-format="YYYY-MM-DD"
              clearable />
          </el-form-item>
          <el-form-item label="籍贯：" prop="nativePlace">
            <el-select v-model="ruleForm!.nativePlace" placeholder="请选择" clearable>
              <el-option v-for="item in cityList" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item filterable label="民族：" prop="nation">
            <el-select v-model="ruleForm!.nation" filterable placeholder="请选择" >
              <el-option v-for="item in nationList" :key="item" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="身份证号码：" prop="idCard">
            <el-input v-model="ruleForm!.idCard" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="政治面貌：" prop="politics">
            <el-select v-model="ruleForm!.politics" placeholder="请选择" clearable>
              <el-option v-for="item in politicsList" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="社保卡号：" prop="socialCard">
            <el-input v-model="ruleForm!.socialCard" placeholder="请输入" clearable />
          </el-form-item>
          <el-form-item label="婚姻状况：" prop="marriage">
            <el-radio-group v-model="ruleForm!.marriage">
              <el-radio :value="item" v-for="item in marriageList">{{ item }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="受教育程度：" prop="eduLevel">
            <el-radio-group v-model="ruleForm!.eduLevel">
              <el-radio :value="item" v-for="item in eduLevelList">{{ item }}</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="最高学历：" prop="education">
            <el-select v-model="ruleForm!.education" placeholder="请选择" clearable>
              <el-option v-for="item in educationList" :label="item" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="户口所在地：" prop="resident">
            <el-input v-model="ruleForm!.resident" placeholder="区/路（存）/弄/号/室" clearable />
          </el-form-item>
          <el-form-item label="现在居住地址：" prop="address">
            <el-input v-model="ruleForm!.address" placeholder="区/路（存）/弄/号/室" clearable />
          </el-form-item>
        </div>
        <el-upload :headers="headers" class="avatar-uploader" :action="BaseUrl + '/api/upload/add'"
          :show-file-list="false" :on-success="handleAvatarSuccess">
          <img v-if="ruleForm!.photo" :src="imgUrl + ruleForm!.photo" class="avatar"
            style="width: 100%;height: 100%; " />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
      </div>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive, inject, provide } from 'vue'
import { AddParams } from '@/api/market/elderly/type'
import { FormInstance, FormRules, UploadProps } from 'element-plus';
import { getCity } from '@/api/market/city/city'
import { nationList } from '@/utils/nationUtils';

const rules = inject<FormRules<AddParams>>('rules')

const ruleForm = inject<AddParams>('ruleForm')!
// console.log("111ruleForm", ruleForm);



//籍贯列表
const cityList = ref<string[]>([])
//获取籍贯列表
const getCityList = async () => {
  let res = await getCity();
  cityList.value = res.map(item => item.n)
}

//政治面貌
const politicsList = ref(['党员', '共青团员', '群众民主党派成员', '无党派人士'])
//婚姻状况
const marriageList = ref(['已婚', '离婚', '丧偶']);
//受教育程度
const eduLevelList = ref(['文盲', '略识文字', '能读写'])
//最高学历
const educationList = ref(['小学', '初中', '高中', '大专', '本科', '硕士', '博士']);

const ruleFormRef = inject('ruleFormRef')
//根路径
const BaseUrl = import.meta.env.VITE_APP_API_URL;
// 图片根路径
const imgUrl = ref(import.meta.env.VITE_IMG_URL);
const headers = { Authorization: localStorage.getItem("token") };

//文件上传前回调
// const beforeAvatarUpload: UploadProps["beforeUpload"] = (rawFile) => {
//   let url = URL.createObjectURL(rawFile);
//   return CompressImage(url, 150);
//   // return true
// };
//文件上传
const handleAvatarSuccess: UploadProps["onSuccess"] = (response, uploadFile) => {
  if (response.code == 10000) {
    console.log(response.data);
    ruleForm!.photo = response.data.url;
  }
};


onMounted(() => {
  getCityList();
})
</script>

<style scoped>
.formTop {
  display: flex;
  justify-content: space-between;
}

/deep/.avatar-uploader .el-upload {
  width: 150px;
  height: 150px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>